﻿@using Lapkin.Models.DataModels
@model Category
@{
    ViewBag.Title = "Категории продуктов";
}

<h2>Категории продуктов</h2>
<div class="span12" style="margin-bottom: 15px;">
    <a href="@Url.Action("AddCategory")" class="btn btn-primary" id="add_category">Добавить Категорию</a>
    <button class="btn btn-danger" id="remove_category">Удалить Категорию</button>
</div>

<div id="categories_tree" class="span4">
    @Html.Partial("_CategoryGenerator", (IEnumerable<Category>)ViewBag.Categories)
</div>


<div class="span7" id="edit_category_container" style="display: none;">
    @using (Ajax.BeginForm("EditCategory", "Category", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "category_form_updater", OnSuccess = "updateTree()", OnFailure = "alert(\"Error\")"}))
    {
        <div id="category_form_updater">
            @Html.Partial("_CategoryForm", Model)
        </div>
    }
</div>


@section script_bottom
{
    <script type="text/javascript" src="~/static/plugins/jstree/jquery.jstree.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript" src="~/static/plugins/jvalidation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/static/plugins/jvalidation/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#categories_tree")
                .jstree({
                    "plugins": ["themes", "html_data", "ui", "dnd"/*, "checkbox"*/],
                    //'checkbox': { 'two_state': true }
                })
                .bind("move_node.jstree", function(e, data) {
                    $.ajax({
                        async: false,
                        type: 'POST',
                        url: "@Url.Action("MoveCategory")",
                        data: {
                            id: data.rslt.o.attr("data-id"),
                            destination: data.rslt.cr !== -1 ? data.rslt.cr.attr("data-id") : 0
                        }
                    });
                    $("#categories_tree").jstree("open_all");
                })
                .bind("loaded.jstree", function() {
                    $("#categories_tree").jstree("open_all");
                    $("#categories_tree").jstree("select_node", $("#categories_tree li").eq(0));
                })
                .bind("select_node.jstree", function(event, data) {
                    var text = data.rslt.obj.find("a").eq(0).text().trim();
                    var alias = data.rslt.obj.attr("data-alias");
                    var id = data.rslt.obj.attr("data-id");
                    $("#edit_category_container").show();

                    $("#category_id_input").val(id);
                    $("#category_name_input").val(text);
                    $("#category_alias_input").val(alias);

                    resetValiadtion();

                    $("#remove_category").attr("data-id", id);
                });
            $("#remove_category").click(function() {
                var id = $(this).attr("data-id");
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: "@Url.Action("RemoveCategory")",
                    data: {
                        id: id != undefined ? id : 0
                    },
                    success: function () {
                        $("#categories_tree").jstree("select_node", $("#categories_tree li").eq(0));
                        $("#categories_tree li#tree_" + id).remove();
                    }
                });
            });
        });

        function resetValiadtion() {
            $(".field-validation-error").removeClass("field-validation-error").addClass("field-validation-valid").text("");
            $(".input-validation-error").removeClass("input-validation-error").addClass("valid");
        }

        function updateTree() {
            var modelStatus = $("#category_model_status").attr("data-status") === "True";
            if (modelStatus) {
                var selected = $.jstree._reference("#categories_tree").get_selected();
                var text = $("#category_name_input").val();
                var alias = $("#category_alias_input").val();
                var ins = selected.find("a").eq(0).find("ins");
                selected.attr("data-alias", alias);
                selected.find("a").eq(0).text("");
                selected.find("a").eq(0).append(ins).append(text);
            }
        }
    </script>
}